<template>
	<view class="task" @touchstart="handlePageTouchStart">
		<uni-nav-bar leftIcon="back" @clickLeft="tolastPage" :statusBar="true" shadow :fixed="true" title="任务下派" color="#101010"
            backgroundColor="#fff"></uni-nav-bar>
		<!-- <view class="navigationBar" style="background: url('../../static/imgs/headbg.png')">
			<tui-icon name="arrowleft" color="#ffffff" :size="50" class="navIcon" @click="tolastPage"></tui-icon>
			<view class="navText">任务下派</view>
		</view> -->
		<view class="form">
			<view class="formList">
				<span><i>*</i>事件名称：</span>
				<input v-model="form.eventName" class="formListInput" type="text" placeholder="事件名称" />
			</view>
			<view class="formList">
				<span><i>*</i>事发地点：</span>
				<input v-model="form.eventAddr" class="formListInput" type="text" placeholder="事发地点" />
			</view>
			<view class="formList">
				<span><i>*</i>事发时间：</span>
				<input v-model="form.eventTime" class="formListInput" type="text" placeholder="事发时间" @click="showTime" disabled/>
				<tui-datetime ref="dateTime" :type="2" @confirm="changeTime"></tui-datetime>
			</view>
			<view class="formList">
				<span><i>*</i>事件描述：</span>
				<input v-model="form.eventContent" class="formListInput" type="text" placeholder="事件描述" />
			</view>
			<view class="formList">
				<span><i>*</i>涉及人数：</span>
				<input v-model="form.narrationNum" class="formListInput" type="text" placeholder="人数" />
			</view>
			<view class="formList">
				<span><i>*</i>事件级别：</span>
				<view style="border: 1rpx solid rgba(170, 170, 170, 0.5); border-radius: 10rpx; height:85rpx; width: calc(100% - 170rpx); padding-left: 20rpx;">
				     <picker @change="examinationType" :range="examinationTypeArray" style="height: 100%;">
				     <label style="display: block; height: 60rpx; padding-top: 25rpx;">{{ form.eventLevel == '' ? '请选择' : form.eventLevel }}</label>
				     </picker>
				</view>
			</view>
			<view class="formList" style="position: relative;">
				<span><i>*</i>下派至：</span>
				<multiSelect style="width: 75%;" :list="list" :selVal="selVal" @changee="bb"></multiSelect>
				<!-- <view class="selectPosi">
					<input type="text" readonly placeholder="请选择" v-model="form.completionXp" class="formListInputl" id="dropdowna" @click.stop="toggleDropdown" />
					<view class="dropdown" v-show="showDropdown">
						<input class="inputTop" type="text" @input="e=>this.getCompletionNameDataList(e.detail.value)" placeholder="关键字搜索" id="dropdowna"  />
						<view v-if="!options.length" style="padding: 20rpx; color: red">未搜索到,请换关键字</view>
					  <view class="dropdown-item" v-for="(option, index) in options" :key="index" @click.stop="toggleOption(index)" id="dropdowna">
						<view class="checkbox" id="dropdowna" :class="{ checked: selectedIndexes.includes(index) }"></view>
						<text id="dropdowna">{{ option }}</text>
					  </view>
					</view>
				</view> -->
			</view>
			<view class="formList">
				<span>情况反馈：</span>
				<textarea v-model="form.eventFeedback" name="sign" class="InputTextarea" placeholder="情况反馈(非必填)"></textarea>
			</view>
			<view class="but">
				<span @click="submitTo">确定下发</span>
			</view>
		</view>
		<tui-tips ref="toast" position="center"></tui-tips>
	</view>
</template>

<script>
import multiSelect from "../userViews/multiSelect"

	export default {
		components: { multiSelect
		},
		data() {
			return {
				selVal: [],
				form:{
					eventName:'',
					eventAddr:'',
					eventTime:'',
					eventContent:'',
					narrationNum:'',
					eventLevel:'',
					completionXp:'',
					eventAdminList:[],
					eventFeedback:'',
					eventStatus:'0',
					settlementStatus:'0'
				},
				showDropdown: false,
				options: [],
				eventAdminList:[],
				selectedIndexes: [],
				examinationTypeArray: ['一级', '二级', '三级'],
			};
		},
		computed: {},
		onLoad() {
			// this.getCompletionNameDataList()
		},
		onUnload() {},
		onShow() {
				this.getCompletionNameDataList()
		},
		mounted(){},
		methods: {
			bb(data) {
				console.log(data, 444);
				this.selVal = data.a;
				this.form.eventAdminList =[];
				this.selVal.map((i) => {
				 this.form.eventAdminList.push({
					 adminId:i.id,
					 sellLevel: this.convertSellLevel(i.roleCode)
				 })
			  })
			},
			async submitTo(){
				let options = {
					msg: '',
					duration: 2000
				};
				if(this.form.eventName == ''){
					options.msg="事件名称不能为空"
				}else if(this.form.eventAddr == ''){
					options.msg="事发地点不能为空"
				}else if(this.form.eventTime == ''){
					options.msg="请选择时间"
				}else if(this.form.eventContent == ''){
					options.msg="事件描述不能为空"
				}else if(this.form.narrationNum == ''){
					options.msg="涉及人数不能为空"
				}else if(this.form.eventLevel == ''){
					options.msg="请选择事件级别"
				}else if(!this.selVal.length){
					options.msg="下派不能为空"
				}else {
					this.$api.showLoading();
					await this.$apis.addrenwuXp(this.form).then(res =>{
						this.$api.hideLoading();
						if(res.code == '20000'){
							options.msg="下派成功"
							setTimeout(() =>{
								wx.navigateBack({
								  delta: 1 
								})
							}, 2000)
						}else{
							options.msg="下派失败"
						}
					}).catch(err=>{})
				}
				this.$refs.toast && this.$refs.toast.showTips(options);
			},
			tolastPage(){
				wx.navigateBack({
				  delta: 1 
				})
			},
			obtainConten(text){
				this.activeTab = text
			},
			showTime(){
				this.$refs.dateTime && this.$refs.dateTime.show();
			},
			changeTime(e) {
				this.form.eventTime = e.result;
			},
			toggleDropdown() {
				this.showDropdown = !this.showDropdown;
			},
			// 多选下拉
			toggleOption(index) {
			  if (this.selectedIndexes.includes(index)) {
				const position = this.selectedIndexes.indexOf(index);
				this.selectedIndexes.splice(position, 1);
			  } else {
				this.selectedIndexes.push(index);
			  }
			  this.form.completionXp = this.selectedIndexes.map((index) => this.options[index]).join(', ');
			  this.form.eventAdminList = []
			  this.selectedIndexes.map((index) => {
				 this.form.eventAdminList.push({
					 adminId:this.eventAdminDataList[index].id,
					 sellLevel: this.convertSellLevel(this.eventAdminDataList[index].roleCode)
				 })
			  })
			},
			convertSellLevel(value){
				if(value == 'tzwy'){
					return 0
				}else if(value == 'wgy'){
					return 1
				}else if(value == 'gdw'){
					return 2
				}else if(value == 'tzb'){
					return 3
				}
			},
			handlePageTouchStart(event){
				if(this.showDropdown && event.target.id != 'dropdowna'){
					this.showDropdown = !this.showDropdown;
				}
			},
			examinationType(e) {
			    const acy = e.target.value;
			    this.form.eventLevel = this.examinationTypeArray[acy];
			},
			getCompletionNameDataList(v){
				this.$apis.completionData({searchKey: v}).then(res =>{
					this.options = []
					this.options = res.data.map(item => item.unitName + "-" + item.adminName)
					this.eventAdminDataList = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
textarea {
    border: 1px solid #666;
    border-radius: 10rpx;
    padding: 20rpx;
    height: 6rem;
}
.inputTop {
    width: 100% !important;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 9999;
    color: #333;
	padding: 0 20rpx;
	height: 60rpx;
	border-bottom: 1px solid #999;
}
	.task{height: 100vh;}
	.navigationBar{position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 180rpx; background-size: 100% 100%;
		.navIcon{position: absolute; left: 0;}
		.navText{font-size: 45rpx;}
	}
	.form{
		margin-bottom: 4rem;
		.formList{ display: flex; align-items: center; padding: 0 30rpx; margin: 40rpx 0;
			span{width: 170rpx; font-size: 30rpx; position: relative;
				i{position: absolute; left: -19rpx; color: red;}
			}
			.formListInput{border: 1rpx solid rgba(170, 170, 170, 0.5); border-radius: 10rpx; height:85rpx; width: calc(100% - 170rpx); padding-left: 20rpx;}
			.InputTextarea{border: 1rpx solid rgba(170, 170, 170, 0.5); border-radius: 10rpx; width: calc(100% - 170rpx); padding-left: 20rpx;}
		}
		.but{text-align: center; margin-top: 80rpx;
			span{font-size: 38rpx; padding:25rpx 60rpx; color:#ffffff; background: linear-gradient(90deg, rgba(23, 72, 244, 1) 0%, #2e7ff3 100%); border-radius: 10rpx;}
		}
	}
	
	.selectPosi {
	  position: relative; height:75rpx; width: calc(100% - 170rpx);
	  .formListInputl{border: 1rpx solid rgba(170, 170, 170, 0.5); border-radius: 10rpx; height: 100%; width: 100%; padding-left: 20rpx;}
	}
	
	.dropdown {
	  position: absolute;
	  top: 100%;
	  left: 0;
	  width: 100%;
	  max-height: 200px;
	  background: #fff;
	  border: 1px solid #ccc;
	  overflow-y: auto;
	  z-index: 999;
	}
	
	.dropdown-item {
	  display: flex;
	  align-items: center;
	  padding: 10px;
	  cursor: pointer;
	}
	
	.checkbox {
	  width: 16px;
	  height: 16px;
	  margin-right: 10px;
	  border: 1px solid #ccc;
	}
	
	.checked {
	  background-color: #007aff;
	}
	
	.click-overlay {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  z-index: 999;
	  background-color: transparent;
	}
</style>